import { Button, View } from "@tarojs/components";
import { useState } from "react";
import { Drawer, Back, IconFont } from "@/components";

// const CharacterList = () => {
//   return (
//     <CustomScrollView ref={ScrollViewRef}>
//       <View className="all-c-header">
//         <Text className="all-c-header-title">数量：{pagination.count >= 0 ? pagination.count : 0}</Text>
//       </View>

//       <View className="all-c-content">
//         {characters.map((character, index) => (
//           <CharacterCard
//             key={character.id}
//             character={character}
//             showImage={false}
//             number={(pagination.cur - 1) * 20 + index + 1}
//           />
//         ))}
//       </View>
//       <Pagination pagination={pagination} setPagination={setPagination} setReqTrigger={setReqTrigger} />
//     </CustomScrollView>
//   );
// };

const AllCharacter = () => {
  // const [filter, setFilter] = useState<CharacterFilterType>(defaultCharacterFilter);
  // const [reqTrigger, setReqTrigger] = useState<ReqTriggerType>({
  //   trigger: true,
  //   firstFilter: false,
  // });
  const [drawerOpen, setDrawerOpen] = useState(true);
  return (
    <View className="all-c-container">
      <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} right width="51%">
        DrawerContent
        {/* <DrawerContent filter={filter} setFilter={setFilter} setReqTrigger={setReqTrigger} /> */}
      </Drawer>
      <View className="all-c">
        <Back className="all-c-back" />
        <Button
          className="all-c-search"
          onClick={() => setDrawerOpen(true)}
          hoverClass="all-c-search_active"
          hoverStyle={{ opacity: 0.6 }}
        >
          <IconFont name="sousuo" size={56} />
        </Button>
        {/* <CharacterList /> */}
      </View>
      {/* <PageContent
        openDrawer={openDrawer}
        closeDrawer={closeDrawer}
        filter={filter}
        reqTrigger={reqTrigger}
        setReqTrigger={setReqTrigger}
      /> */}
    </View>
  );
};

export default AllCharacter;
// import React, { useState, useCallback } from "react";
// import { View } from "@tarojs/components";

// import { Drawer } from "@components";

// import { PageContent, DrawerContent } from "../components";
// import { PlatformEnterProps } from "../type";
// import "../index.less";

// const AllCharacterRN: React.FC<PlatformEnterProps> = (props) => {
//   const { filter, setFilter, reqTrigger, setReqTrigger } = props;
//   const [drawerWE, setDrawerWE] = useState<boolean>(false);

//   const openDrawer = useCallback(() => setDrawerWE(true), []);
//   const closeDrawer = useCallback(() => setDrawerWE(false), []);

//   return (
//     <View className="all-c-container">
//       <Drawer show={drawerWE} onClose={() => setDrawerWE(false)} right width="51%">
//         <DrawerContent filter={filter} setFilter={setFilter} setReqTrigger={setReqTrigger} />
//       </Drawer>
//       <PageContent
//         openDrawer={openDrawer}
//         closeDrawer={closeDrawer}
//         filter={filter}
//         reqTrigger={reqTrigger}
//         setReqTrigger={setReqTrigger}
//       />
//     </View>
//   );
// };

// export default AllCharacterRN;
